<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/base.css" rel="stylesheet">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>
<div class="headtop"></div>
<nav class="navbar navbar-default col-sm-12" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><strong>Cay博客管理后台</strong></a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 陈伟</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-xs-12 " style="border: 1px solid #d9dadc;background-color: #fff;min-height: 700px;">
            <div style="border-bottom:1px solid #d9dadc;height: 40px ">
                <ol class="breadcrumb" style="margin-top: 3px;background-color: #fff;">
                    <li><a href="#">首页</a></li>
                    <li class="active">编辑文章</li>
                </ol>
            </div>
            <form class="form-horizontal" role="form" style="margin-top: 15px" action="/upcontext" method="post" enctype="multipart/form-data" id="content" >
                <div class="form-group">
                    <label for="c_title" class="col-sm-1 control-label">文章标题</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="c_title" placeholder="请输入文章标题" name="title">
                    </div>
                </div>
                <div class="form-group ">
                    <label for="c_author" class="col-sm-1 control-label">作者</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="c_author" placeholder="请输入作者姓名" name="author">
                    </div>
                </div>
                <div class="form-group ">
                    <div id="editor" class="col-sm-11" style="height: 350px" name="context">
                    </div>
                    <script type="text/javascript" charset="utf-8" src="/static/js/UEditor/ueditor.config.js"></script>
                    <script type="text/javascript" charset="utf-8" src="/static/js/UEditor/ueditor.all.min.js"> </script>
                    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
                    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
                    <script type="text/javascript" charset="utf-8" src="/static/js/UEditor/lang/zh-cn/zh-cn.js"></script>
                    <script type="text/javascript">
                        var ue = UE.getEditor('editor');
                    </script>
                </div>
                <div class="form-group">
                    <label for="c_classify" class="col-sm-1 control-label">类型</label>
                    <div>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify0"  value="101"> 慢生活
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify" value="102"> Android
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify1"  value="103"> Golang
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify2" value="104"> PHP
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify3"  value="105"> MySql
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify4" value="106"> JAVA
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify5"  value="107"> HTML/CSS
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify6"  value="108"> JavaScript
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="c_classify7"  value="109"> jQuery
                        </label>
                    </div>
                </div>
                <div class="form-group " >
                    <label for="c_coverimg" class="col-sm-1 control-label" >封面图片</label>
                    <div class="col-sm-4">
                        <input type="file"  id="c_coverimg" onchange="preImg(this.id,'photo');" name="coverimg">
                    </div>
                </div>
                <div class="form-group hidden" id="imgShow" style="margin-bottom: 15px">
                    <div class="col-sm-offset-1">
                        <img id="photo" src="" width="250px" height="250px" style="display: block;" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="c_abstract" class="col-sm-1 control-label">摘要</label>
                    <div class=" col-sm-11">
                        <textarea class="form-control" rows="3" id="c_abstract" placeholder="请输入文章摘要" name="abstract"></textarea>
                    </div>
                </div>
                <div class="form-group">
                  <!--  <div class="col-sm-offset-4 col-sm-2">
                        <button type="submit" class="btn btn-success">保存</button>
                    </div>-->
                    <div class="col-sm-offset-4 col-sm-2">
                        <button type="button" class="btn btn-success" onclick="isNull()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
            url = document.getElementById(sourceId).value;
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }
    // 显示选择的封面
    function preImg(sourceId, targetId) {
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
        var imgShow = document.getElementById("imgShow");
        imgShow.setAttribute("class", "show");
    }
    //判断内容是否为空
    function isNull(){
        var title = $("*[name='title']");
         titlev =title.val();
        if (titlev==null||titlev.trim()==""){
            title.parent().parent().addClass("has-error")
        }
        title.change(function () {
            title.parent().parent().removeClass("has-error")
        });

        var optionsRadiosinline=$('input:radio[name="optionsRadiosinline"]:checked').val();
        if (optionsRadiosinline==null||optionsRadiosinline.trim()==""){
            $("*[name='optionsRadiosinline']").parent().parent().parent().addClass("has-error");
        }
        $("*[name='optionsRadiosinline']").change(function () {
            $("*[name='optionsRadiosinline']").parent().parent().parent().removeClass("has-error");
        });

        var au = $("*[name='author']");
        var author = au.val();
        if (author==null||author.trim()==""){
            au.parent().parent().addClass("has-error");
        }
        au.change(function () {
            au.parent().parent().removeClass("has-error");
        });

        var cover = $("*[name='coverimg']");

        var coverimg = cover.val();
        if (coverimg==null||coverimg.trim()==""){
            cover.parent().parent().addClass("has-error");
        }
        cover.change(function () {
            cover.parent().parent().removeClass("has-error");
        });
        var ab = $("*[name='abstract']");
        var abstract = ab.val();
        if (abstract==null||abstract.trim()==""){
            ab.parent().parent().addClass("has-error")
        }
        ab.change(function () {
            ab.parent().parent().removeClass("has-error");
        });
        if(ue.getContentTxt().trim()!=""&&ue.getContentTxt()!=null&&titlev!=null&&titlev.trim()!=""&& optionsRadiosinline!=null&&optionsRadiosinline.trim()!=""&& author!=null&&author.trim()!="" && coverimg!=null&&coverimg.trim()!="" && abstract!=null&&abstract.trim()!=""){
            $("#content").submit();
        }
    }
</script>
</html>